<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<!-- <el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="国家/地区" prop="name">
					<el-input v-model="state.queryParams.name" placeholder="请输入国家/地区" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form> -->
			<el-row :gutter="10" class="top-block">
				<el-col :span="1.5">
					<el-button type="primary" @click="onOperation({ type: 'add', title: '添加国家/地区' }, '')"> 添加国家/地区 </el-button>
				</el-col>
				<RightToolbar v-model:showSearch="state.showSearch" @queryTable="getList" />
			</el-row>
			<el-table :data="state.tableList" row-key="id" lazy :load="tableLoad" :tree-props="{ children: 'children' }" v-loading="state.loading">
				<el-table-column label="编号" prop="id" align="center" width="140" />
				<el-table-column label="国家/地区" prop="name" align="center" />
				<el-table-column label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-button type="primary" link @click="onOperation({ type: 'edit', title: '修改国家/地区' }, row)">修改</el-button>
						<el-button type="primary" link @click="onTranslate(row)"> 翻译管理 </el-button>
						<el-popconfirm title="您确定删除该数据？此操作不可撤回" @confirm="onDelete(row)" width="180px">
							<template #reference>
								<el-button type="primary" link> 删除 </el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<OperationDialog ref="operationDialogRef" />
		<TranslateDialog ref="translateDialogRef" />
	</div>
</template>

<script setup lang="ts" name="country">
import { ElMessage } from 'element-plus';
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { areaApi } from '/@/api';

const OperationDialog = defineAsyncComponent(() => import('./dialog/operationDialog.vue'));
const TranslateDialog = defineAsyncComponent(() => import('./dialog/translateDialog.vue'));

const AreaApi = areaApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		name: '',
		parent_id: 0,
	},
	tableList: [],
	loading: false,
	total: 0,
});
// const queryFormRef = ref();
const operationDialogRef = ref();
const translateDialogRef = ref();

onMounted(() => {
	getList();
});

/********** 触发事件 **********/
// // 查询
// const onQuery = () => {
// state.queryParams.pageNum = 1;
// 	getList();
// };
// // 重置查询
// const onResetQuery = () => {
// 	queryFormRef.value.resetFields();
// 	onQuery();
// };
// 懒加载
const tableLoad = (row: any, treeNode: any, resolve: (date: any) => void) => {
	_areaList1({ parent_id: row.id }, treeNode.level, resolve);
};
// 添加/修改
const onOperation = (data: Object, row: Object) => {
	operationDialogRef.value.openDialog(data, row, () => getList());
};
// 翻译管理
const onTranslate = (row: Object) => {
	translateDialogRef.value.openDialog(row);
};
// 删除
const onDelete = (row: any) => {
	_areaDelete({ area_id: row.id });
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	state.tableList = [];
	_areaList(state.queryParams);
};

/********** 网络事件 **********/
// 国家地区列表
const _areaList = (params: Object) => {
	AreaApi.areaList(params)
		.then((res: any) => {
			state.tableList = res.data.list.map((item: any) => {
				return {
					...item,
					hasChildren: true,
				};
			});
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// 国家地区列表
const _areaList1 = (params: Object, level: number, resolve: (arg0: any) => void) => {
	AreaApi.areaList(params).then((res: any) => {
		let nodes = res.data.list.map((item: any) => ({
			...item,
			hasChildren: true,
		}));
		resolve(nodes);
	});
};
// 删除国家地区
const _areaDelete = (params: Object) => {
	AreaApi.areaDelete(params).then(() => {
		ElMessage.success('操作成功！');
		getList();
	});
};
</script>

<style lang="scss" scoped>
.card__body-container {
	:deep(.el-cascader-menu__wrap.el-scrollbar__wrap) {
		height: auto !important;

		.is-empty {
			height: 80vh;
		}
	}
}
</style>
